<template>
  <div class="qinlv-role-container">
    <!-- 表单区域 -->
    <el-form :model="form" label-width="150px" class="form-container">
      <!-- 昵称输入 -->
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" placeholder="该怎么称呼您呢？"></el-input>
      </el-form-item>

      <!-- 旅游目的地省份选择 -->
      <el-form-item label="旅游目的地省份">
        <el-select v-model="form.province" placeholder="请选择省份">
          <el-option label="陕西省" value="shaanxi"></el-option>
        </el-select>
      </el-form-item>

      <!-- 旅游目的地城市选择 -->
      <el-form-item label="旅游目的地城市" required>
        <el-select v-model="form.city" placeholder="请选择城市">
          <el-option label="西安" value="xian"></el-option>
          <el-option label="延安" value="yanan"></el-option>
          <el-option label="宝鸡" value="baoji"></el-option>
          <el-option label="渭南" value="weinan"></el-option>
          <el-option label="商洛" value="shangluo"></el-option>
        </el-select>
      </el-form-item>

      <!-- 性别选择 -->
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 文化之旅选择 -->
      <el-form-item label="文化之旅">
        <el-radio-group v-model="form.culturalTrip">
          <el-radio label="yes">来一个</el-radio>
          <el-radio label="no">不了</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 自然之旅选择 -->
      <el-form-item label="自然之旅">
        <el-radio-group v-model="form.natureTrip">
          <el-radio label="yes">来一个</el-radio>
          <el-radio label="no">不了</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 其他想法输入 -->
      <el-form-item label="您的其他想法">
        <el-input
          type="textarea"
          v-model="form.otherThoughts"
          placeholder="尽管提出来，我们帮您一起想^o^"
        ></el-input>
      </el-form-item>

      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据
const form = ref({
  nickname: '', // 昵称
  province: '', // 省份
  city: '', // 城市
  gender: 'male', // 性别，默认男
  culturalTrip: 'yes', // 文化之旅，默认选择
  natureTrip: 'yes', // 自然之旅，默认选择
  otherThoughts: '', // 其他想法
});

// 保存按钮点击事件
const handleSubmit = () => {
  console.log('表单数据:', form.value);
  alert('保存成功！');
};

// 取消按钮点击事件
const handleCancel = () => {
  form.value = {
    nickname: '',
    province: '',
    city: '',
    gender: 'male',
    culturalTrip: 'yes',
    natureTrip: 'yes',
    otherThoughts: '',
  };
  alert('已取消');
};
</script>

<style scoped>
.qinlv-role-container {
  padding: 20px;
  width: 100%;
}

.form-container {
  width: 930px;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-select,
.el-textarea {
  width: 100%;
}

.el-radio-group {
  display: flex;
  gap: 20px;
}
</style>